<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" label-width="70px" style="margin-top:20px">
      <!-- <el-form-item label="分公司">
        <el-select v-model="formInline.branchId" placeholder="请选择分公司" :disabled="isBranch" style="width:150px;margin-right:10px">
          <el-option v-for="(item, index) in branchList" :key="index" 
          :label="item.branch_Name" 
          :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="分公司">
        <el-select v-if="!brachDisabled" v-model="formInline.branchId" :disabled="brachDisabled" style="width:150px;margin-right:10px">
          <el-option v-for="(item, index) in this.branchList" :value="item.branch_Id" :label="item.branch_Name" :key="index"></el-option>
        </el-select>
        <el-input v-if="brachDisabled" v-model="showBranch" :disabled="isBranch" style="width:160px"></el-input>
      </el-form-item>
      <el-form-item label="一级分类">
        <el-select v-model="formInline.firstCate" @change="searchGoods($event, '2')" style="width:150px;margin-right:10px" clearable  placeholder="一级分类">
          <el-option v-for="(item, index) in firstClassifyGroup" :label="item.cateName" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="formInline.secondCate" style="width:150px;margin-right:10px" clearable  placeholder="二级分类">
          <el-option v-for="(item, index) in secondClassifyGroup" :label="item.cateName" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="formInline.hmpName" style="width:150px;margin-right:10px" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品ID">
        <el-input v-model="formInline.hmpId" style="width:150px;margin-right:10px" placeholder="商品ID"></el-input>
      </el-form-item>
			<el-form-item>
        <el-button type="primary"  @click="searchList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="isLoading" border>
      <el-table-column prop="BP_State" label="排序" align="center" width="100"></el-table-column>
      <el-table-column prop="branch_Name" label="分公司" align="center"></el-table-column>
      <el-table-column prop="HMP_Id" label="商品ID" align="center" width="100"></el-table-column>
      <el-table-column prop="HMP_Name" label="分类信息" align="center"></el-table-column>
      <el-table-column label="分类信息" align="center">
        <template scope="scope">
          <span>{{scope.row.firstName}} —— {{scope.row.secondName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="HMB_BrandName" label="品牌" align="center" width="100"></el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template scope="scope">
          <el-button size="small" @click="sortUpdate(scope.row)">顺序调整</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(formInline.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
  </div>
</template>
<script>
  import mixins from '../../../components/mixins.vue'
  import { mapState } from 'vuex'
  import { cms, batchManage } from '../../../config/proxy.js'
  export default {
    mixins: [mixins],
    data () {
      return {
        formInline: {
          branchId: '',
          firstCate: '',
          secondCate: '',
          hmpId: '',
          hmpName: '',
          page: 1,
          pageSize: 10
        },
        brachDisabled: false,
        showBranch: '',
        total: '',
        isLoading: false,
        isBranch: false,
        tableData: [], // table 数组
        branchList: [], // 分公司 数组
        firstClassifyGroup: [], // 一级分类数组
        secondClassifyGroup: [] // 二级分类数组
      }
    },
    methods: {
      searchGoods (id, group) { // 查询商品分类方法
        cms.pType({pid: id}, (res) => {
          // console.log(res)
          if (res.message === 'ok') {
            // console.log(res.content)
            if (group === '1') {
              this.firstClassifyGroup = res.content
            } else if (group === '2') {
              this.secondClassifyGroup = res.content
            }
          }
        })
      },
      searchList () { // 查询列表
        var _data = this.formInline
        this.isLoading = true
        batchManage.sppx.list(_data, (res) => {
          if (res.message === 'ok') {
            console.log(res)
            this.tableData = res.content.content
            this.isLoading = false
            this.total = res.content.count
            this.formInline.page = res.content.page
          }
        })
      },
      handleCurrentChange (val) { // 分页
        this.formInline.page = val
        this.tableData = []
        this.isLoading = true
        this.searchList()
      },
      sortUpdate (row) { // 调整顺序
        this.$prompt('请输入正整数', '顺序调整', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: row.BP_State.toString(),
          inputPattern: /^[0-9]+$/,
          inputErrorMessage: '请输入正整数'
          // inputValidator: function (val) {
          //   var reg = /^([1-9]\d*|[0]{1,1})$/
          //   if (val === 0) {
          //     return true
          //   } else if (!reg.test(val)) {
          //     return '请输入正整数'
          //   }
          // }
        }).then(({ value }) => {
          var _data = {
            bpStatus: value,
            bproId: row.bproId
          }
          batchManage.sppx.update(_data, (res) => {
            if (res.message === 'ok') {
              this.searchList()
              this.$message({
                type: 'success',
                message: '修改成功'
              })
            } else {
              this.$message({
                type: 'error',
                message: '修改失败'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          })
        })
      }
    },
    created () {
      this.searchGoods('', '1') // 查询一级分类
      if (this.branchId === 1) {
        this.brachDisabled = false
        this.formInline.branchId = this.branchId
      } else {
        this.brachDisabled = true
        this.showBranch = this.branchName
        this.formInline.branchId = this.branchId
      }
    },
    computed: mapState({
      userName: function (state) {
        if (!state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.user_name
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      branchOrgId: function (state) {
        return state.user.info.branchOrgId
      },
      deptName: function (state) {
        return state.user.info.parOrgName
      },
      deptId: function (state) {
        return state.user.info.or_org_id
      }
    })
  }
</script>

